iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0

with 的功能強大,但因為爭議的關係在未來使用於程式碼中的機會不大,但可以看看他如何在各實作中呈現,例如測試或樣板等等。

這章想學到什麼?

  • 真實世紀 with 的範例
  • 匯入有命名空間的程式
  • 測試
  • 樣板與 with

程式碼閱讀練習與撰寫

真實世紀 with 的範例

with(doucment.body.style) {
    backgroundRepeat = "no-repeat";
    backgroundImage = "url(http://ie7-js.googlecode.com/svn/trunk/lib/blank.gif)"
    backgroundAttachment = "fixed"
}

匯入有命名空間的程式

with (YAHOO.util.Dom) {
    YAHOO.util.Event.on([get('item'), get('otheritem')], 'click', function(){  setStyle(this, 'color', '#c00')})


}

測試

new Test.Unit.Runner({
    testSliderBasics: function(){
        with(this){
            var slider = new Control.Slider('handle1', 'track1');
            assertInstanceOf(Control.Slider, slider);
            assertEqual('horizontal', slider.axios);
            assertEqual(false, slider.disabled);
            assertEqual(0, slider.value);
            slider.dispose();
        }
    },
    // ...
})

樣板與 with

(function(){
var cache = {};

this.tmpl = function tmpl(str, data){
    var fn !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
    new Function("obj", 
    "var p=[], print=function(){p.push.apply(p,arguments);};" + 
    "with(obj){p.push('" + 
    str
        .replace(/[\r\t\n]/g, " ")
        .splite("<%").join("\t")
        .replace(/((^|%>)[^\t]*)'/g, "$1\r")
        .replace(/\t=(.*?)%>/g, "',$1,'")
        .splite("\t").join("');")
        .splite("%>").join("p.push('")
        .splite("\r").join("\\'")
    + "');} return p.join('');");

    return data ? fn(data) : fn;
    };
})()

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with


上一篇
with 述句(上) Day19
下一篇
跨瀏覽器開發策略(上) Day21
系列文
JS 忍者訓練計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言